<template>
    <a-input-search v-model:value="searchKey" placeholder="搜索" style="margin-bottom: 16px;" />
    <a-tree
        :block-node="true"
        :fieldNames="fieldNames"
        :expanded-keys="expandedKeys"
        :auto-expand-parent="autoExpandParent"
        :tree-data="treeDataSource"
        @expand="onExpand"
        @select="onSelect"
    >
        <template #title="{ orgName }">
            <template v-if="searchKey && searchKey.length > 0 && orgName.indexOf(searchKey) >= 0">
                <span>{{ orgName.substr(0, orgName.indexOf(searchKey)) }}</span>
                <span class="key_word">{{ searchKey }}</span>
                <span>{{ orgName.substr(orgName.indexOf(searchKey) + searchKey.length) }}</span>
            </template>
            <span v-else>{{ orgName }}</span>
        </template>
    </a-tree>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
// Api
import Api from '@/axios/api/org';
// Model
import { Result } from '@/model/common';
import { OrgDictDTO } from '@/model/org';

const emit = defineEmits(['select']);

const fieldNames = {
    key: 'orgId',
    title: 'orgName',
    children: 'children',
}
// 展开的key
const expandedKeys = ref<String[]>([]);
// 自动展开父节点
const autoExpandParent = ref(true);
// 树数据源
const treeDataSource = ref<OrgDictDTO[]>([]);
// 数据源多层结构转为一层结构，便于查询搜索
const listDataSource = ref<ListData[]>([]);
watch(treeDataSource, value => {
    listDataSource.value.length = 0;
    handleListData(value, listDataSource.value, []);
})

// Api获取数据
Api.listDictTree()
    .then((res: Result) => {
        treeDataSource.value = res.data;
    })

// 搜索关键字
const searchKey = ref('');
watch(searchKey, value => {
    if (value && value.length > 0) {
        let _expandedKeys: string[] = [];
        listDataSource.value.forEach(item => {
            if (item.title.indexOf(value) >= 0) {
                _expandedKeys = _expandedKeys.concat(item.parentKeys);
            }
        });
        expandedKeys.value = _expandedKeys as any;
        autoExpandParent.value = true;
    }
})

// 展开/收起节点时触发
const onExpand = (keys: string[]) => {
    expandedKeys.value = keys;
    autoExpandParent.value = false;
}

const onSelect = (selectedKeys: string[]) => {
    let selectedKey = undefined;
    if (selectedKeys && selectedKeys.length > 0) {
        selectedKey = selectedKeys[0];
    }
    emit('select', selectedKey);
}

const handleListData = (treeDataSource: OrgDictDTO[], listDataSource: ListData[], parentKeys: string[]) => {
    treeDataSource.forEach(item => {
        listDataSource.push({ key: item.orgId, title: item.orgName, parentKeys: parentKeys.slice(0) });
        if (item.children) {
            const _parentKeys = parentKeys.slice(0)
            _parentKeys.push(item.orgId);
            handleListData(item.children, listDataSource, _parentKeys);
        }
    })
}
</script>
<script lang="ts">
export class ListData {
    public key!: string;
    public title!: string;
    public parentKeys: string[] = [];
}
</script>

<style lang="less" scoped>
.key_word {
    color: @warning-color;
    font-weight: bold;
    margin: 0 4px;
}
</style>